<template>
  <div>
    <div class="login-wrap" v-if="showLogin">
      <h3>登录</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input type="text" placeholder="请输入用户名..." v-model="username">
      <input type="password" placeholder="请输入密码..." v-model="password">
      <button v-on:click="login">登录</button>
      <span v-on:click="toRegister">没有账号?马上注册</span>
      <br>
      <span>{{this.$store.state.count}}</span>
    </div>

    <div class="login-wrap" v-if="showRegister">
      <h3>注册</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input type="text" placeholder="请输入用户名..." v-model="newUsername">
      <input type="password" placeholder="请输入密码..." v-model="newPassword">
      <button v-on:click="register">注册</button>
      <span v-on:click="toLogin">已有账号？马上登录</span>
    </div>
    <div>
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>
  </div>
</template>

<script type="text/javascript">
export default{
  name: 'Login',
  data () {
    return {
      showLogin: true,
      showRegister: false,
      showTishi: false,
      tishi: '',
      username: '',
      password: '',
      newUsername: '',
      newPassword: ''
    }
  },
  mounted () {
    console.log(1111)
  },
  methods: {
    login () {
      if (this.username === '' || this.password === '') {
        alert('请输入用户名或密码')
      } else {
        let param = new URLSearchParams()
        param.append('username', this.username)
        param.append('password', this.password)
        this.$ajax({
          method: 'post',
          url: '/user/queryUser',
          data: param
        })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (response) {
            console.log(response)
          })
      }
    },
    register () {
      this.$ajax.post('/user/register', {
        'username': this.newUsername,
        'password': this.newPassword
      })
        .then(function (response) {
          console.log(response)
        })
        .catch(function (response) {
          console.log(response)
        })
    },
    toRegister () {
      this.showLogin = false
      this.showRegister = true
      this.showTishi = false
    },
    toLogin () {
      this.showLogin = true
      this.showRegister = false
      this.showTishi = false
    }
  }
}
</script>

<style type="text/css">
  .login-wrap{
    text-align: center;
  }
  input{
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin:0 auto;
    margin-bottom: 10px;
    outline:none;
    border:1px solid #888;
    padding:10px;
    box-sizing:border-box;
  }
  p{
    color:red;
  }
  button{
    display:block;
    width:250px;
    height:40px;
    line-height: 40px;
    margin:0 auto;
    border:none;
    background-color:#41b883;
    color:#fff;
    font-size:16px;
    margin-bottom:5px;
  }
    span{
      cursor:pointer;
    }
    span:hover{
      color:#41b883;
    }
</style>
